<template>
    <div>
        <p id="title">基本信息</p>
        <form>
            <span>昵称：</span><input type="text" placeholder="" v-model="userinfo.name"><br>
            <span>性别：</span><input type="radio" name="sex" value="male" v-model="userinfo.sex">男<input type="radio" id="nv" name="sex" value="female" v-model="userinfo.sex">女<br>
            <span>生日：</span>  <input type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" v-model="userinfo.birthday"><br>
            <span>兴趣爱好：</span> <br>
            <div id="habby">
                <input type="checkbox" name="" id="" value="1" v-model="arr">美食
                <input type="checkbox" name="" id="" value="2"  v-model="arr" >动漫
                <input type="checkbox" name="" id="" value="3"  v-model="arr" >摄影
                <input type="checkbox" name="" id="" value="4"  v-model="arr" >电影
                <input type="checkbox" name="" id="" value="5" v-model="arr">体育<br>
                <input type="checkbox" name="" id="" value="6"  v-model="arr" >财经
                <input type="checkbox" name="" id="" value="7"  v-model="arr" >音乐
                <input type="checkbox" name="" id="" value="8"  v-model="arr" >游戏
                <input type="checkbox" name="" id="" value="9" v-model="arr">科技
                <input type="checkbox" name="" id="" value="10"  v-model="arr" >旅游<br>
                <input type="checkbox" name="" id="" value="11"  v-model="arr" >文学
                <input type="checkbox" name="" id="" value="12"  v-model="arr" >工艺
                <input type="checkbox" name="" id="" value="13" v-model="arr">汽车
                <input type="checkbox" name="" id="" value="14"  v-model="arr" >时尚
                <input type="checkbox" name="" id="" value="15"  v-model="arr" >宠物
            </div>
            <span>个人信息:</span><br> <textarea v-model="userinfo.sign"></textarea><br>
            <button id="button1" @click.prevent="print">保存</button><button id="button2" @click.prevent="tuichu">退出</button>
        </form>
    </div>
    
  </template>
  <script>
    import axios from 'axios'
    export default {

      name: 'gjibenxinxi',
      data(){
        return{
            arr:[],    
            userinfo:[],
        }
    
      },
      components: {
      },
      methods:{
        tuichu(){
          sessionStorage.setItem('myuser',null);
          this.$router.push('/logn');
        },
        print(){
          console.log(this.arr.join(','));
          console.log(this.userinfo.birthday);
                this.arr.join(',');
                axios.get("http://localhost:8080/updateUserinfo/"
                +this.$store.state.user.id+"/"
                +this.userinfo.sex+"/"
                +this.userinfo.birthday+"/"
                +this.arr+"/"
                +this.userinfo.sign+"/").then((resp) => {
      var n = resp.data;
      axios.get("http://localhost:8080/selectUserinfo/"+this.$store.state.user.id).then((resp) => {
      this.userinfo = resp.data;
      console.log(this.userinfo);
      this.arr= this.userinfo.hobby.split(",");
      console.log(this.arr);   } )
               if(n!=0){
                this.$message({
              message: "修改成功",
              type: "success",
            });

               }
    })}}
      , created() {
        // this.$store.state.user.id
        var user=JSON.parse(sessionStorage.getItem('myuser'));
        console.log(344,user);
     axios.get("http://localhost:8080/selectUserinfo/"+user.id).then((resp) => {
      this.userinfo = resp.data;
      console.log(this.userinfo);
      this.arr= this.userinfo.hobby.split(",");
      console.log(this.arr);
    })
   
    
  },
}
    </script>
  <style scoped>
      *{
        padding:0px;
        margin:0px;
    }
    #nv{
        margin-left:10px;
    }
    #title{
    box-sizing: border-box;
    color:orange;
    padding-left:400px;
    border-bottom:solid 2px orange;
    height: 60px;
    padding-top:15px ;
    font-size: 25px;
    }
    #button1{
    width: 108px;
    height: 30px;
    background-color: rgb(255, 0, 0);
    margin-top: 20px;
    border: none;
    margin-bottom: 10px;
    /* font-size: 20px; */
    color:rgb(139, 0, 0);
    border-radius: 5px;
  }
  #button2{
    width: 108px;
    height: 30px;
    background-color: blueviolet;
    margin-top: 20px;
    border: none;
    margin-bottom: 10px;
    /* font-size: 20px; */
    color:rgb(139, 0, 0);
    border-radius: 5px;
  }
  button:hover{
    box-shadow: 1px 0px 2px 1px #aaaaaa;
  }
  input{
    margin-top:20px
  }
  #habby{
    margin-bottom:20px
  }
  textarea{
    margin-left: 40px;
  }
  form{
    margin-left: 40px;
  }
  
  </style>
  